<template>
	<view>
		<div style="height:50rpx"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('更改车辆状态')}}
		</div>
		<view class="transport" @click="pickerState=true">
			<view class="transport_name">
				{{stateName||$t('请选择')}}
			</view>
			<u-icon name="arrow-down" color="#8C8C8C" size="24rpx"></u-icon>
		</view>
			
		<view class="footer_none"></view>
		<view class="footer_btn">
			<u-button type="primary" class="btn" text="保存" :loading="submit_loading" :disabled="submit_loading" @click="submit_sub"></u-button>
		</view>
		
		<u-picker ref="pickerState"  :closeOnClickOverlay="true"  keyName="label" :itemHeight="80"  :show="pickerState" :columns="columnState" @confirm="confirmState" @cancel="pickerState=false" @close="pickerState=false"></u-picker>
		
	</view>
</template>

<script>
	import {transport_save,current_car_status} from '@/api/driver'
	export default {
		data() {
			return {
				columnState: [
					[{
				        label: this.$t('工作'),
				        id: 3
				    },
					 {
					     label: this.$t('空闲'),
					     id: 1
					 },
					 {
					     label: this.$t('待出发'),
					     id: 2
					 },
					 {
					     label: this.$t('停运'),
					     id: 4
					 }]
				],
				stateVal:'',
				stateName:'',
				pickerState:false,
				submit_loading:false,
				driverInfor:{}
			}
		},
		onLoad(options) {
		 console.log(this.$t('传递参数'),options)
		 this.driverInfor=JSON.parse(options.driverInfor)
		 this.stateVal=this.driverInfor.status
		 this.stateName=this.columnState[0].filter((item)=>{
			 if(item.id==this.stateVal){
				 return item
			 }
		 })[0].label
		},
		methods: {
			back() {
				// uni.navigateBack()
				this.cback()
			},

			confirmState(e){
				console.log('confirm', e.value[0]);
				this.stateVal = e.value[0].id
				this.stateName=e.value[0].label
				this.driverInfor.status= e.value[0].id
				this.pickerState=false
			},
			submit_sub(){
				this.submit_loading=true
				setTimeout(()=>{
					this.submit_loading=false
				},1000)
				let pickerForms={
					user_id:uni.getStorageSync('user_id') || '1644',
					id:this.driverInfor.id,
					status:this.driverInfor.status,
				}
				        
				current_car_status(pickerForms).then((res) => {
					uni.$emit('refreshIfNeeded', true)
					uni.navigateBack({
					  delta: 1,
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F6F7FB;
	}
	.header {
		font-size: 34rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		padding-top: var(--status-bar-height);
	}
	
	.back {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 18rpx;
	}

.transport{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 96rpx;
	border-radius: 20rpx;
	background: #fff;
	padding:0 24rpx;
	margin: 20rpx 24rpx;
	.transport_name{
		color: #333;
		font-size: 26rpx;
		line-height: 30px;
	}
}
.footer_none{
	width: 100%;
	height: 210rpx;
}
.footer_btn{
	position: fixed;
	left:0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding:30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	.btn{
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color:#fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
}
</style>
